import styles from './Projects.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { FC, useEffect, useState } from 'react'
import { Typography, Input, Image } from 'antd'
import { Card } from '@/components/universal/Card/Card'
import { ListResponsive } from '@/components/universal/ListResponsive/ListResponsive'
import { SvgIcon } from '@/components/icons'
import { Add_48x48 } from '@/components/icons/Add_48x48'
import { useNavigate } from 'react-router-dom'
import { TextAsset } from '@/components/graph/assets/TextAsset/TextAsset'
import { VideoAsset } from '@/components/graph/assets/VideoAsset/VideoAsset'
import { RequirementsSummaryMethod } from '@/components/graph/methods/RequirementsSummaryMethod/RequirementsSummaryMethod'
import { AudioAsset } from '@/components/graph/assets/AudioAsset/AudioAsset'
import { ModelAsset } from '@/components/graph/assets/ModelAsset/ModelAsset'
import { useWtsStore } from '@/hooks'
import { DesignMeta } from 'wts/dist/schema/Service'
import { UUID } from '@/store/metaStore'
import { get_asset_url } from 'wts/dist/api/AssetService'

const Projects = () => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const navigation = useNavigate()
  const wtsStore = useWtsStore()

  const [projects, setProjects] = useState<DesignMeta[]>([])

  useEffect(() => {
    wtsStore.app
      .list_design_of_user(1, 10)
      .then((projects) => {
        // console.log('projects', projects)
        setProjects(projects)
        return projects
      })
      .catch((err) => console.error('projects', err))
  }, [wtsStore.app])

  const handleCreateNewProject = async () => {
    const designOperator = await wtsStore.app.create_design(
      'test', // TODO: use user input
      null, // TODO: add template
      '', // TODO: use actual image
      wtsStore.abilityCallbacks // TODO
    )
    console.log('handleCreateNewProject', designOperator)

    navigation(`/graph/${designOperator.id}`) // TODO: use function
  }

  const handleEnterProject = async (projectID: number) => {
    navigation(`/graph/${projectID}`) // TODO: use function
  }

  const getCoverImage = (assetID: UUID) => {
    const defaultCover =
      'https://s3.bmp.ovh/imgs/2023/11/08/74be99b1754c6e1a.png'
    return assetID ? get_asset_url(assetID) : defaultCover
  }

  return (
    <div {...styleClass(['layout'])}>
      <div {...styleClass(['header-layout'])}>
        <Typography.Text {...styleClass(['header-title'])}>
          项目
        </Typography.Text>
        <Input.Search
          {...styleClass([], { width: 360 })}
          placeholder="input search text"
          allowClear
        />
      </div>
      <ListResponsive
        {...styleClass(['list-layout'], { gap: 16, minWidth: 400 })}
      >
        <Card
          {...styleClass(['new-card-wrapper'])}
          onClick={handleCreateNewProject}
        >
          <SvgIcon {...styleClass(['new-card-icon'])} icon={Add_48x48} />
          <Typography.Text {...styleClass(['new-card-text'])}>
            新建项目
          </Typography.Text>
        </Card>
        {/*  TODO: use i18n */}
        {projects.map((project) => (
          <ProjectCard
            imgUrl={getCoverImage(project.cover_image)}
            key={project.id}
            title={project.name ?? 'nameless'}
            lastEdit={`最后编辑于${project.updated_at}`}
            onClick={() => handleEnterProject(project.id)}
          />
        ))}
        {/* <ProjectCard */}
        {/*  imgUrl={'https://s3.bmp.ovh/imgs/2023/11/08/74be99b1754c6e1a.png'} */}
        {/*  title={'挖掘机设计'} */}
        {/*  lastEdit={'最后编辑于3小时前'} */}
        {/* /> */}
        {/* <ProjectCard */}
        {/*  imgUrl={'https://s3.bmp.ovh/imgs/2023/11/08/9ce84eeb858a148f.png'} */}
        {/*  title={'挖掘机设计-副本'} */}
        {/*  lastEdit={'最后编辑于5小时前'} */}
        {/* /> */}
        {/* <ProjectCard */}
        {/*  imgUrl={'https://s3.bmp.ovh/imgs/2023/11/08/8249986048568e1b.png'} */}
        {/*  title={'无人机设计'} */}
        {/*  lastEdit={'最后编辑于2023-9-28'} */}
        {/* /> */}
        {/* <ProjectCard */}
        {/*  imgUrl={'https://s3.bmp.ovh/imgs/2023/11/08/adb063b3b32d76e8.png'} */}
        {/*  title={'客机座椅设计'} */}
        {/*  lastEdit={'最后编辑于2023-9-28'} */}
        {/* /> */}
      </ListResponsive>
      <TextAsset />
      <VideoAsset
        // videoUrl={'https://media.w3.org/2010/05/sintel/trailer_hd.mp4'}
        videoUrl={
          'https://kvideo01.youju.sohu.com/aafb9824-fa50-44d0-9acd-bcc0de6038d32_0_0.mp4?sign=375a170f6e434bcc3f19fa4201874fe6&t=1701192641'
        }
      />

      <RequirementsSummaryMethod />
      <AudioAsset
        audiourl={'https://music.163.com/song/media/outer/url?id=1969744125'}
        width={400}
      />

      <ModelAsset />
    </div>
  )
}

export default Projects

interface IProjectCard {
  imgUrl?: string
  title?: string
  lastEdit?: string
  onClick?: () => void
}
const ProjectCard: FC<IProjectCard> = ({
  imgUrl = '',
  title,
  lastEdit,
  onClick,
}) => {
  const styleClass = useStyles(styles)
  return (
    <Card {...styleClass(['card-wrapper'])} onClick={onClick}>
      <div {...styleClass(['card-img-wrapper'])}>
        <Image width={'100%'} height={170} src={imgUrl} preview={false}></Image>
      </div>
      <div {...styleClass(['card-info-wrapper'])}>
        <Typography.Text {...styleClass(['card-info-title'])}>
          {title}
        </Typography.Text>
        <Typography.Text {...styleClass(['card-info-last-edit'])}>
          {lastEdit}
        </Typography.Text>
      </div>
    </Card>
  )
}
